<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ include file="/common/taglibs.jsp" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>客户地图</title>
    <%@ include file="/common/util.jsp" %>
    <script>
        $(function () {
            var map = new BMap.Map("map"); // 创建地图实例
            map.setMapStyle({
                styleJson: styleJson
            });
//            map.enableScrollWheelZoom(true);
            var bdary = new BMap.Boundary();
            var map_provinces = eval('${map_provinces }');
            var positionList = eval('${positionList }');
            mapInit();
            // 全国地图初始化
            function mapInit() {
                var point = new BMap.Point(114.210966, 35.717388); //获取地图中心点
                map.centerAndZoom(point, 5);
                map.disableScrollWheelZoom(true);
                $('#current-area').text('全国');
                map.clearOverlays();
                for (var i = 0; i < map_provinces.length; i++) {
                    var province = map_provinces[i];
                    drawBoundary(province.name, dash_boundary);
                    var point = new BMap.Point(province.lng, province.lat);
                    drawLabel(point, province.showname, province.offsetx, province.offsety, area_label);
                }
                setTimeout(drawBoundary('中国', solid_boundary), 2000);
                showPosition(positionList, 'province-item');

                $('.area-list .province-item').on('click', function () {
                    map.clearOverlays();
                    var currentArea = $(this).find('.area').text();
                    var zoom = $(this).find('.area-heat').attr('zoom');
                    selectProvince(currentArea,zoom);
                });
            }

            $('.top-right').click(function () {
                var area = $('#parentArea').val();
                var zoom = $('#parentZoom').val();
                if(area=='全国'){
                    mapInit();
                    getEnergy('');
                    $(this).hide();
                }else{
                    selectProvince(area,zoom);
                }
            });

            function selectProvince(currentArea,zoom){

                $('#parentArea').val('全国');
                $('#parentZoom').val(zoom);
                getEnergy(currentArea);
                $('#current-area').text(currentArea);
                $.ajax({
                    async: false,
                    contentType: "application/json",
                    url: "${cdnctx }/customerMap/findPointByArea.shtml",
                    data: {area: currentArea},
                    dataType: "json",
                    success: function (data) {
                        var point1 = new BMap.Point(data.lng, data.lat);
                        map.centerAndZoom(point1, zoom);
                    }
                });
                $.ajax({
                    async: false,
                    contentType: "application/json",
                    url: "${cdnctx }/customerMap/findMapCityByProvince.shtml?province=" + currentArea,
                    dataType: "json",
                    success: function (data) {
                        _.each(data, function (city) {
                            drawBoundary(city.name, dash_boundary);
                            var point = new BMap.Point(city.lng, city.lat);
                            drawLabel(point, city.showname, city.offsetx, city.offsety, area_label);
                        })
                    }
                });
//                    drawBoundary(currentArea, solid_boundary);

                $.ajax({
                    async: false,
                    contentType: "application/json",
                    url: "${cdnctx }/customerMap/findCityByProvince.shtml?province=" + currentArea,
                    dataType: "json",
                    success: function (data) {
                        showPosition(data, 'district-item');
                    }
                });

                $('.area-list .district-item').on('click', function () {
                    map.clearOverlays();
                    var currentArea = $(this).find('.area').text();
                    getEnergy(currentArea);
                    var parentArea = $('#current-area').text();
                    $('#parentArea').val(parentArea);
                    $('#current-area').text(currentArea);
                    drawBoundary(currentArea, solid_boundary, true);
                    $.ajax({
                        async: false,
                        contentType: "application/json",
                        url: "${cdnctx }/customerMap/findCustomerByCity.shtml?city=" + currentArea,
                        dataType: "json",
                        success: function (data) {
                            showCustomer(data, 'cutomer-item');
                        }
                    });
                });
                $('.top-right').show();
            }
            // 绘制边界
            function drawBoundary(area, style, zoom) {
                bdary.get(area, function (rs) {
                    for (var j = 0; j < rs.boundaries.length; j++) {
                        var ply = new BMap.Polygon(rs.boundaries[j], style); //建立多边形覆盖物
                        map.addOverlay(ply);
                        if (zoom) {
                            map.setViewport(ply.getPath()); //调整视野
                        }
                    }
                });
            }

            //添加文字标注
            function drawLabel(point, label, offsetx, offsety, style) {
                var opts = {
                    position: point,    // 指定文本标注所在的地理位置
                    offset: new BMap.Size(offsetx, offsety)    //设置文本偏移量
                };
                var label = new BMap.Label(label, opts);  // 创建文本标注对象
                label.setStyle(style);
                map.addOverlay(label);
            }

            function showPosition(positionList, liClass) {
                _.each(positionList, function (item) {
                    var myGeo = new BMap.Geocoder();
                    myGeo.getPoint(item.position, function (point) {
                        if (point) {
                            var areaOverlay = new AreaOverlay(point, item.num / positionList[0].num, item.position);
                            map.addOverlay(areaOverlay);
                        }
                    });
                });
                $('.area-list').html('');
                _.each(positionList, function (position, index) {
                    var items = ['<li class="' + liClass + '">',
                        '<div class="area-item">',
                        '<span class="index">',
                        index + 1,
                        '</span>',
                        '<span class="area">',
                        position.position,
                        '</span>',
                        '<span class="area-heat" zoom="' + position.zoom + '" num="' + position.num + '">',
                        '</span>',
                        '<span class="area-count">',
                        position.num,
                        '</span>',
                        '</div>',
                        '</li>'];
                    $('.area-list').append(items.join(''));
                });

                $('.area-heat').each(function () {
                    var porperation = $(this).attr('num') / positionList[0].num;
                    var width = porperation * $(this).width();
                    $(this).width(width);
                });

            }

            function showCustomer(customerList, liClass) {
                _.each(customerList, function (item) {
                    var point = new BMap.Point(item.lng, item.lat);
                    var areaOverlay = new AreaOverlay(point, 0, item.customername);
                    map.addOverlay(areaOverlay);
                });
                $('.area-list').html('');
                _.each(customerList, function (customer, index) {
                    var items = ['<li class="' + liClass + '">',
                        '<div class="area-item">',
                        '<span class="index">',
                        index + 1,
                        '</span>',
                        '<span class="area-long" >',
                        '<a target="_blank" href="${cdnctx}/energy/AreaEnergy.shtml?customerinfoid=' + customer.id + '" >' + customer.customername + '</a>',
                        '</span>',
                        '</div>',
                        '</li>'];
                    $('.area-list').append(items.join(''));
                })
            }

            selectDate();
        });

        function selectDate() {
            $('#searchDate').change(function () {
                $('#searchDate').blur();
                var area = $('#current-area').text();
                if (area == '全国') {
                    area = '';
                }
                getEnergy(area);
            });
        }

        function getEnergy(area) {
            $("#areaname").html(area == '' ? '全国' : area);
            var searchDate = $('#searchDate').val();
            $('#selectType').val(searchDate);
            $.ajax({
                async: false,
                contentType: "application/json",
                url: "${cdnctx }/customerMap/getEnergy.shtml?area=" + area + "&searchDate=" + searchDate,
                dataType: "json",
                success: function (data) {
                    $("#all-energy").html(data[0]);
                    $("#center-energy").html(data[1]);
                    $("#right-energy").html(data[2]);
                }
            });
            $('#messageWindow').parent().parent().next().click();
        }
    </script>

</head>
<body class="main" onload>
<div class="-frame -style -luster" id="css_container">
    <!--首页框架页眉部分↓-->
    <%@ include file="/WEB-INF/pages/customerMap/header.jsp" %>
    <!--首页框架页眉部分↑-->
    <div class="content map" style="bottom: 0px;top: 70px">
        <div id="map" style="height:100%; width:90%;">
        </div>
        <div class="top-right">
            <a class="back-to-all">
                <div>返回上一级</div>
            </a>
        </div>
        <div class="side-container" style="width: 315px;overflow: scroll">
            <div class="side-search">
                <div class="search-container">
                    <div class="search-box">
                        <span>当前区域：</span><span id="current-area">全国</span>
                        <input type="hidden" id="parentArea">
                        <input type="hidden" id="parentZoom">
                        <%--<input type="search" class="search-input" maxlength="15" placeholder="搜索省份">--%>
                    </div>
                </div>
            </div>
            <div class="side-list">
                <ul class="area-list">
                </ul>
            </div>
        </div>
        <select id="searchDate">
            <c:forEach items="${searchTime}" var="element" varStatus="state">
                <option value="${state.index}"
                        <c:if test="${timeType == state.index}">selected</c:if> >${element}</option>
            </c:forEach>
        </select>
        <div class="bottom-container">
            <p class="energy-type"><span id="areaname" class="area-name">全国</span>总耗电量（度）：<span class="energy-value"
                id="all-energy"><fmt:formatNumber value="${allEnergy}"
                                                  pattern="0.00"/></span></p>
            <p class="energy-type">空调耗电量（度）：<span class="energy-value" id="right-energy"><fmt:formatNumber value="${airEnergy}"
                                                                  pattern="0.00"/></span></p>

            <p class="energy-type">照明耗电量（度）：<span class="energy-value" id="center-energy"><fmt:formatNumber value="${lightEnergy}"
                                                                   pattern="0.00"/></span></p>
        </div>
    </div>
</div>
</div>
</body>
</html>
formatNumber